import React from 'react';

import {Link} from 'react-router';

import Fetch from '../../common/Fetch';

class Lefter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:[]
        };
    }

    componentDidMount() {
        this.loadData();
    }

    loadData() {
        Fetch('/res/blog_category/get_list',{},(res)=>{
            if (res.status) {
                this.setState({
                    data:res.data
                });
            }
        });
    }

    render() {
        return (
            <div className="lefter">
                <div className="user_info">
                    <div className="blog_head">
                        <img className="head_img" src={require('../../assets/img/head.jpg')}/>

                        <div className="summary">
                            <p>
                                一个在WEB开发界的码农
                            </p>
                        </div>
                    </div>
                    {this.renderCategory()}

                    <div className="blog_copyright">
                        Power By Go & React<br/>  Copyright ©2016 Clake
                    </div>
                </div>
            </div>
        );
    }

    renderCategory() {
        return (
            <div className="blog_category">
                <ul>
                    {this.state.data.map((item)=>{
                        return (
                            <li>
                                <Link to={'/category/'+item.ctg_id}
                                      activeStyle={{color:"#fff"}}>
                                {item.ctg_name} ({item.ctg_number})
                                </Link>
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

export default Lefter;